<template>
  <div class="height100 p20 boxSizingBorderBox overflowA" :ref="tabNavRef">
    <div class="tabNavRightCon">
      <div
        class="overflowH tabNavLab mb15"
        v-for="(item, index) in tabNavData"
        :key="index"
        :data-content="item.data_content"
        @click="LoadtabNavLabLink(item)"
      >
        <span
          class="left tabNavTitle"
          :class="{ currentNavTitle: item.isClassActive }"
          >{{ item.name }}</span
        >
      </div>
    </div>
    <div class="tabNavLeftCon">
      <div
        class="borderPosition"
        v-for="(item, index) in tabNavData"
        :key="index"
        :ref="item.data_content"
      >
        <h5 class="textPosition">{{ item.name }}</h5>
        <div class="ContentPosition">
          <component :is="item.compt" v-bind="$attrs" v-on="$listeners" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import XEUtils from "xe-utils";
import { getTabNavData } from "@/components/api/tabNav.js";
export default {
  name: "tabNav",
  props: {
    tabNavRef: {
    //自定义ref
      type: String,
      default() {
        return "tabNav";
      },
    },
    isCustomData: {
     // 是否自定义数据
      type: Boolean,
      default() {
        return true;
      },
    },
    customData: {
    // 当前组件自定义数据
      type: Array,
      default() {
        return [];
      },
    },
    which: {
    //第几组标签导航
      type: [String, Number],
      default() {
        return 1;
      },
    },
  },
  data() {
    return {
      tabNavData: [],
      labBoxHeightObj: {},
      labBoxScollTopObj: [],
      labBoxScollTopList: [],
    };
  },
  components: {},
  watch: {},
  created() {
    this.getData();
  },
  mounted() {
    this.$refs.tabNav.addEventListener("scroll", this.scroolTabNavBox);
    setTimeout(() => {
      this.tabNavData.forEach((item) => {
        this.labBoxHeightObj[item.data_content] =
          this.$refs[item.data_content] && this.$refs[item.data_content][0]
            ? this.$refs[item.data_content][0].offsetHeight
            : null;
      });
      this.tabNavData.forEach((item) => {
        let topVal = 0;
        for (let i = 0; i < this.tabNavData.length; i++) {
          if (this.tabNavData[i].data_content == item.data_content) {
            break;
          }
          topVal += this.labBoxHeightObj[this.tabNavData[i].data_content] + 15;
        }
        topVal += 20;
        this.labBoxScollTopList.push({
          data_content: item.data_content,
          topVal: topVal,
        });
        this.labBoxScollTopObj[item.data_content] = topVal;
      });
    }, 100);
  },
  methods: {
     getData() {
      if (this.isCustomData) {
        this.initTabNavData(this.customData);
      } else {
        let params = {};
        getTabNavData(params)
          .then((res) => {
            this.initTabNavData(res.data);
          })
          .catch((err) => {
            console.log("请求失败：" + err.status + "," + err.statusText);
          });
      }
    },
     initTabNavData(data) {
      this.tabNavData = data && data.length > 0 ? data : [];
    },
    scroolTabNavBox() {
      let scrolledTop = this.$refs.tabNav.scrollTop;
      this.labBoxScollTopList.forEach((item, index, arr) => {
        if (
          XEUtils.toNumber(scrolledTop) >= XEUtils.toNumber(item.topVal) &&
          XEUtils.toNumber(scrolledTop) <
            XEUtils.toNumber(arr[index + 1].topVal)
        ) {
          this.LoadLabStyle(item.data_content);
        }
      });
    },
    LoadtabNavLabLink(item) {
      this.LoadLabStyle(item.data_content);
      this.$refs.tabNav.scrollTop = this.labBoxScollTopObj[item.data_content];
    },
    LoadLabStyle(AccCurrId) {
      this.tabNavData.forEach((item) => {
        item.isClassActive = item.data_content == AccCurrId;
      });
    },
  },
};
</script>

<style scoped lang="less">
.tabNavLeftCon {
  margin-right: 130px;
}
.tabNavLab {
  width: 120px;
  height: 30px;
  cursor: pointer;
}
.tabNavLab .tabNavTitle {
  line-height: 30px;
  color: #464646;
  font-weight: bold;
  font-size: 15px;
  margin-left: 24px;
}
.tabNavLab .currentNavTitle {
  color: #0013f9 !important;
}

.tabNavRightCon {
  position: absolute;
  top: 25px;
  right: 20px;
}
</style>
